import { getDeviceListALl } from "@/api/modules/iot/device";
import { defineComponent } from "vue";
export default defineComponent({
	props: {
		modelValue: [String, Number, Array],
		multiple: Boolean,
		detail: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	emits: ["update:modelValue"],
	setup(props, { emit }) {
		const state = reactive<any>({
			selected: props.multiple ? [] : "",
			dataList: []
		});
		onMounted(async () => {
			let res = await getDeviceListALl({ pageIndex: 1, pageSize: 9999 });
			state.dataList = res.result?.records || [];
			state.selected = props.modelValue;
		});
		const change = () => {
			props.detail.devSn = state.selected;
			emit("update:modelValue", state.selected);
		};
		return () => {
			return (
				<>
					<div class="w-full">
						<el-select
							class="w-full"
							multiple={props.multiple}
							collapse-tags
							collapse-tags-tooltip
							v-model={state.selected}
							placeholder="请选择设备"
							onChange={() => change()}
							clearable
							filterable
						>
							{state.dataList.map((item: any) => {
								return <el-option label={item.sn} value={item.sn} />;
							})}
						</el-select>
					</div>
				</>
			);
		};
	}
});
